<template>
  <view class="dy-scroll-container">
    <dy-navbar title="Pagination-分页组件" />
    <scroll-view class="dy-scroll dy-flex-column" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" :desc="'当前页：' + baseUsed" />
        <template slot="body">
          <dy-pagination v-model="baseUsed" :total="300" />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="填充模式" desc="fill" />
        <template slot="body">
          <dy-pagination
            v-model="fill"
            :total="300"
            :limit="5"
            :page-size="20"
            active-mode="fill"
          />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="填充模式+右对齐" desc="align=right" />
        <template slot="body">
          <dy-pagination
            v-model="fillAlign"
            :total="300"
            :limit="5"
            :page-size="20"
            active-mode="fill"
            align="right"
          />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="item插槽" desc="slot=item" />
        <template slot="body">
          <dy-pagination v-model="itemSlot" :total="300" :page-size="20">
            <template slot="item" slot-scope="{ item, active }">
              <view class="dy-fz-32" :class="active ? 'dy-fz-40 dy-fz-500 dy-solid-bottom-6' : ''">
                {{ item }}
              </view>
            </template>
          </dy-pagination>
        </template>
      </dy-card>
      <dy-card>
        <dy-section
          slot="title"
          padding="0"
          title="上一页、下一页插槽"
          desc="slot=prev，slot=next"
        />
        <template slot="body">
          <dy-pagination
            v-model="prevSlot"
            :total="300"
            :limit="5"
            :page-size="20"
            active-mode="fill"
            align="left"
          >
            <dy-icon slot="prev" name="back" size="32" />
            <dy-icon slot="next" name="right" size="32" />
          </dy-pagination>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'PiPaginationDemo',
  data() {
    return {
      baseUsed: 2,
      fill: 1,
      fillAlign: 1,
      itemSlot: 3,
      prevSlot: 8
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .dy-solid-bottom-6::after {
  border-bottom-color: $dy-primary-color;
}
</style>
